<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>美女摩托艇滑雪 - 双人竞速</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
        }

        .game-wrapper {
            position: relative;
            width: 100%;
            max-width: 900px;
            height: 100vh;
            max-height: 700px;
        }

        /* 游戏容器 */
        .game-container {
            position: relative;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, #87CEEB 0%, #1E90FF 100%);
            border-radius: 20px;
            box-shadow: 0 25px 80px rgba(0,0,0,0.4);
            overflow: hidden;
        }

        /* 游戏画布 */
        #gameCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
        }

        /* UI层 */
        .ui-layer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 10;
        }

        /* 顶部信息栏 */
        .top-bar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        /* 计分板 */
        .score-panel {
            background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
            padding: 12px 20px;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255,255,255,0.3);
        }

        .player-info {
            display: flex;
            align-items: center;
            margin: 8px 0;
            font-weight: bold;
        }

        .player-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        .player1-avatar { background: linear-gradient(135deg, #FF6B6B, #FF8E53); }
        .player2-avatar { background: linear-gradient(135deg, #4ECDC4, #44A08D); }

        .score-text {
            font-size: 18px;
            color: #333;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }

        /* 速度表 */
        .speed-meter {
            background: rgba(255,255,255,0.9);
            padding: 10px 15px;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .speed-bar {
            width: 120px;
            height: 8px;
            background: #ddd;
            border-radius: 4px;
            overflow: hidden;
            margin-top: 5px;
        }

        .speed-fill {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #8BC34A, #FFEB3B, #FF9800, #F44336);
            transition: width 0.3s;
        }

        /* 开始界面 */
        .start-screen {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0,0,0,0.85), rgba(0,0,0,0.75));
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 100;
            transition: all 0.5s ease;
        }

        .start-screen.hidden {
            opacity: 0;
            transform: scale(0.9);
            pointer-events: none;
        }

        .game-logo {
            font-size: 42px;
            font-weight: bold;
            color: white;
            margin-bottom: 30px;
            text-align: center;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
            animation: logoFloat 3s ease-in-out infinite;
        }

        @keyframes logoFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .character-selection {
            display: flex;
            gap: 30px;
            margin-bottom: 30px;
        }

        .character-card {
            background: rgba(255,255,255,0.1);
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }

        .character-card:hover {
            transform: translateY(-5px);
            background: rgba(255,255,255,0.2);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

        .character-card.selected {
            border-color: #FFD700;
            background: rgba(255,215,0,0.2);
        }

        .character-icon {
            font-size: 48px;
            margin-bottom: 10px;
        }

        .character-name {
            color: white;
            font-size: 16px;
            font-weight: bold;
        }

        .start-button {
            padding: 18px 50px;
            font-size: 24px;
            font-weight: bold;
            background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .start-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(0,0,0,0.4);
        }

        .start-button:active {
            transform: translateY(-1px);
        }

        /* 控制提示 */
        .controls-guide {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 15px 25px;
            border-radius: 10px;
            font-size: 14px;
            text-align: center;
            backdrop-filter: blur(10px);
        }

        .control-row {
            margin: 5px 0;
        }

        .key-highlight {
            background: rgba(255,255,255,0.2);
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: bold;
        }

        /* 游戏结束界面 */
        .game-over-screen {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.9);
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 200;
        }

        .game-over-screen.show {
            display: flex;
        }

        .winner-text {
            font-size: 48px;
            color: #FFD700;
            margin-bottom: 20px;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
            animation: winnerPulse 1s ease-in-out infinite;
        }

        @keyframes winnerPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .final-scores {
            background: rgba(255,255,255,0.1);
            padding: 20px 40px;
            border-radius: 15px;
            margin-bottom: 30px;
        }

        .restart-button {
            padding: 15px 40px;
            font-size: 20px;
            background: linear-gradient(45deg, #4CAF50, #8BC34A);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .restart-button:hover {
            transform: scale(1.05);
        }

        /* 道具提示 */
        .powerup-indicator {
            position: absolute;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255,255,255,0.9);
            padding: 10px 20px;
            border-radius: 10px;
            font-weight: bold;
            color: #333;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .powerup-indicator.show {
            opacity: 1;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .game-wrapper {
                max-height: 100vh;
            }
            
            .game-container {
                border-radius: 0;
            }
            
            .game-logo {
                font-size: 32px;
            }
            
            .character-selection {
                gap: 20px;
            }
            
            .character-card {
                padding: 15px;
            }
            
            .character-icon {
                font-size: 36px;
            }
            
            .start-button {
                padding: 15px 35px;
                font-size: 20px;
            }
            
            .controls-guide {
                font-size: 12px;
                padding: 10px 15px;
            }
        }
    </style>
</head>
<body>
    <div class="game-wrapper">
        <div class="game-container">
            <canvas id="gameCanvas"></canvas>
            
            <!-- UI层 -->
            <div class="ui-layer">
                <!-- 顶部信息栏 -->
                <div class="top-bar">
                    <div class="score-panel">
                        <div class="player-info">
                            <div class="player-avatar player1-avatar">👩</div>
                            <span class="score-text">玩家1: <span id="player1Score">0</span></span>
                        </div>
                        <div class="player-info">
                            <div class="player-avatar player2-avatar">👩</div>
                            <span class="score-text">玩家2: <span id="player2Score">0</span></span>
                        </div>
                    </div>
                    
                    <div class="speed-meter">
                        <div style="color: #333; font-weight: bold;">速度</div>
                        <div class="speed-bar">
                            <div class="speed-fill" id="speedFill" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 道具提示 -->
                <div class="powerup-indicator" id="powerupIndicator"></div>
            </div>
            
            <!-- 开始界面 -->
            <div class="start-screen" id="startScreen">
                <div class="game-logo">
                    🏂 美女摩托艇滑雪 🏂<br>
                    <span style="font-size: 24px;">双人竞速挑战</span>
                </div>
                
                <div class="character-selection">
                    <div class="character-card" data-player="1">
                        <div class="character-icon">👩‍🦰</div>
                        <div class="character-name">火辣美女</div>
                    </div>
                    <div class="character-card" data-player="2">
                        <div class="character-icon">👩‍🦱</div>
                        <div class="character-name">酷飒美女</div>
                    </div>
                </div>
                
                <button class="start-button" onclick="startGame()">开始竞速</button>
                
                <div class="controls-guide">
                    <div class="control-row">
                        <span class="key-highlight">玩家1</span>: A/D 或 ←/→ 移动 | W 加速
                    </div>
                    <div class="control-row">
                        <span class="key-highlight">玩家2</span>: J/L 移动 | I 加速
                    </div>
                    <div class="control-row">
                        <span class="key-highlight">手机</span>: 触摸屏幕左右两侧
                    </div>
                </div>
            </div>
            
            <!-- 游戏结束界面 -->
            <div class="game-over-screen" id="gameOverScreen">
                <div class="winner-text" id="winnerText">🏆 玩家1 获胜！</div>
                <div class="final-scores">
                    <div style="color: white; font-size: 18px; margin: 10px 0;">
                        玩家1: <span id="finalScore1">0</span> 分
                    </div>
                    <div style="color: white; font-size: 18px; margin: 10px 0;">
                        玩家2: <span id="finalScore2">0</span> 分
                    </div>
                </div>
                <button class="restart-button" onclick="restartGame()">再来一局</button>
            </div>
        </div>
    </div>

    <script>
        // 游戏配置
        const GAME_CONFIG = {
            CANVAS_WIDTH: 900,
            CANVAS_HEIGHT: 700,
            PLAYER_WIDTH: 50,
            PLAYER_HEIGHT: 70,
            MAX_SPEED: 12,
            ACCELERATION: 0.4,
            FRICTION: 0.08,
            GAME_DURATION: 60000, // 60秒
            OBSTACLE_SPAWN_RATE: 0.02,
            POWERUP_SPAWN_RATE: 0.008
        };

        // 游戏状态
        let gameState = {
            running: false,
            startTime: 0,
            currentTime: 0,
            selectedCharacters: {
                player1: '👩‍🦰',
                player2: '👩‍🦱'
            }
        };

        // 获取元素
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const startScreen = document.getElementById('startScreen');
        const gameOverScreen = document.getElementById('gameOverScreen');

        // 设置画布
        function setupCanvas() {
            const container = canvas.parentElement;
            canvas.width = container.clientWidth;
            canvas.height = container.clientHeight;
        }

        setupCanvas();
        window.addEventListener('resize', setupCanvas);

        // 游戏对象类
        class Player {
            constructor(x, y, color, name, emoji) {
                this.x = x;
                this.y = y;
                this.width = GAME_CONFIG.PLAYER_WIDTH;
                this.height = GAME_CONFIG.PLAYER_HEIGHT;
                this.color = color;
                this.name = name;
                this.emoji = emoji;
                this.speed = 0;
                this.maxSpeed = GAME_CONFIG.MAX_SPEED;
                this.acceleration = GAME_CONFIG.ACCELERATION;
                this.friction = GAME_CONFIG.FRICTION;
                this.score = 0;
                this.angle = 0;
                this.trail = [];
                this.maxTrailLength = 25;
                this.powerup = null;
                this.powerupTime = 0;
                this.invulnerable = false;
                this.boostParticles = [];
            }

            update(deltaTime) {
                // 应用摩擦力
                this.speed *= (1 - this.friction);
                
                // 更新位置
                this.y -= this.speed;
                
                // 保持在赛道内
                const trackLeft = canvas.width * 0.15;
                const trackRight = canvas.width * 0.85;
                if (this.x < trackLeft) this.x = trackLeft;
                if (this.x > trackRight) this.x = trackRight;
                
                // 更新轨迹
                this.trail.push({
                    x: this.x, 
                    y: this.y + this.height/2,
                    alpha: 1
                });
                
                if (this.trail.length > this.maxTrailLength) {
                    this.trail.shift();
                }
                
                // 更新轨迹透明度
                this.trail.forEach((point, index) => {
                    point.alpha = (index / this.trail.length) * 0.5;
                });
                
                // 计算得分
                if (this.speed > 1) {
                    const scoreGain = Math.floor(this.speed * (this.powerup === 'double' ? 2 : 1));
                    this.score += scoreGain;
                }
                
                // 更新道具时间
                if (this.powerupTime > 0) {
                    this.powerupTime -= deltaTime;
                    if (this.powerupTime <= 0) {
                        this.powerup = null;
                        this.maxSpeed = GAME_CONFIG.MAX_SPEED;
                    }
                }
                
                // 更新粒子效果
                this.updateParticles();
                
                // 重置角度
                this.angle *= 0.85;
            }

            updateParticles() {
                // 添加新粒子
                if (Math.abs(this.speed) > 2 && Math.random() > 0.3) {
                    this.boostParticles.push({
                        x: this.x + (Math.random() - 0.5) * this.width,
                        y: this.y + this.height/2,
                        vx: (Math.random() - 0.5) * 2,
                        vy: Math.random() * 2 + 1,
                        life: 1,
                        color: this.powerup ? '#FFD700' : '#FFFFFF'
                    });
                }
                
                // 更新粒子
                this.boostParticles = this.boostParticles.filter(particle => {
                    particle.x += particle.vx;
                    particle.y += particle.vy;
                    particle.life -= 0.02;
                    return particle.life > 0;
                });
            }

            draw() {
                // 绘制轨迹
                if (this.trail.length > 1) {
                    ctx.strokeStyle = this.color + '40';
                    ctx.lineWidth = 4;
                    ctx.lineCap = 'round';
                    ctx.beginPath();
                    this.trail.forEach((point, index) => {
                        ctx.globalAlpha = point.alpha;
                        if (index === 0) {
                            ctx.moveTo(point.x, point.y);
                        } else {
                            ctx.lineTo(point.x, point.y);
                        }
                    });
                    ctx.stroke();
                    ctx.globalAlpha = 1;
                }
                
                // 绘制粒子效果
                this.boostParticles.forEach(particle => {
                    ctx.globalAlpha = particle.life;
                    ctx.fillStyle = particle.color;
                    ctx.beginPath();
                    ctx.arc(particle.x, particle.y, 3 * particle.life, 0, Math.PI * 2);
                    ctx.fill();
                });
                ctx.globalAlpha = 1;
                
                // 绘制摩托艇阴影
                ctx.fillStyle = 'rgba(0,0,0,0.3)';
                ctx.ellipse(this.x, this.y + this.height/2 + 5, 
                           this.width/2, this.height/4, 0, 0, Math.PI * 2);
                ctx.fill();
                
                // 绘制摩托艇主体
                ctx.save();
                ctx.translate(this.x, this.y);
                ctx.rotate(this.angle);
                
                // 摩托艇车身
                const gradient = ctx.createLinearGradient(-this.width/2, 0, this.width/2, 0);
                gradient.addColorStop(0, this.color);
                gradient.addColorStop(0.5, this.lightenColor(this.color, 20));
                gradient.addColorStop(1, this.color);
                
                ctx.fillStyle = gradient;
                ctx.beginPath();
                ctx.moveTo(-this.width/2, -this.height/2);
                ctx.lineTo(this.width/2, -this.height/2);
                ctx.lineTo(this.width/2 - 5, this.height/2);
                ctx.lineTo(-this.width/2 + 5, this.height/2);
                ctx.closePath();
                ctx.fill();
                
                // 摩托艇装饰
                ctx.strokeStyle = this.darkenColor(this.color, 20);
                ctx.lineWidth = 2;
                ctx.stroke();
                
                // 驾驶舱
                ctx.fillStyle = 'rgba(100, 200, 255, 0.7)';
                ctx.fillRect(-this.width/3, -this.height/3, this.width/1.5, this.height/4);
                
                ctx.restore();
                
                // 绘制美女角色
                ctx.save();
                ctx.translate(this.x, this.y - this.height/2 - 15);
                
                // 身体
                ctx.fillStyle = '#FFB6C1';
                ctx.beginPath();
                ctx.ellipse(0, 5, 12, 18, 0, 0, Math.PI * 2);
                ctx.fill();
                
                // 头部
                ctx.fillStyle = '#FDBCB4';
                ctx.beginPath();
                ctx.arc(0, -10, 10, 0, Math.PI * 2);
                ctx.fill();
                
                // 头发（根据角色类型）
                ctx.fillStyle = this.name === '玩家1' ? '#8B4513' : '#000000';
                if (this.emoji === '👩‍🦰') {
                    // 长发
                    ctx.beginPath();
                    ctx.arc(-8, -10, 8, Math.PI, 0);
                    ctx.arc(8, -10, 8, Math.PI, 0);
                    ctx.fill();
                } else {
                    // 短发
                    ctx.beginPath();
                    ctx.arc(0, -15, 10, Math.PI, 0);
                    ctx.fill();
                }
                
                // 绘制emoji表情
                ctx.font = '16px Arial';
                ctx.textAlign = 'center';
                ctx.fillText(this.emoji, 0, -8);
                
                ctx.restore();
                
                // 绘制水花效果
                if (Math.abs(this.speed) > 1) {
                    this.drawSplash();
                }
                
                // 绘制道具效果
                if (this.powerup) {
                    this.drawPowerupEffect();
                }
            }

            drawSplash() {
                const splashCount = Math.floor(Math.abs(this.speed) / 2);
                for (let i = 0; i < splashCount; i++) {
                    const splashX = this.x + (Math.random() - 0.5) * this.width;
                    const splashY = this.y + this.height/2 + Math.random() * 15;
                    const splashSize = Math.random() * 4 + 1;
                    
                    ctx.fillStyle = `rgba(255, 255, 255, ${Math.random() * 0.6 + 0.2})`;
                    ctx.beginPath();
                    ctx.arc(splashX, splashY, splashSize, 0, Math.PI * 2);
                    ctx.fill();
                }
            }

            drawPowerupEffect() {
                ctx.save();
                ctx.strokeStyle = '#FFD700';
                ctx.lineWidth = 3;
                ctx.setLineDash([5, 5]);
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.width, 0, Math.PI * 2);
                ctx.stroke();
                ctx.restore();
            }

            moveLeft() {
                this.x -= 6;
                this.angle = -0.15;
            }

            moveRight() {
                this.x += 6;
                this.angle = 0.15;
            }

            accelerate() {
                const boost = this.powerup === 'boost' ? 1.5 : 1;
                this.speed = Math.min(this.speed + this.acceleration * boost, this.maxSpeed);
            }

            applyPowerup(type) {
                this.powerup = type;
                this.powerupTime = 5000; // 5秒
                
                switch(type) {
                    case 'boost':
                        this.maxSpeed = GAME_CONFIG.MAX_SPEED * 1.5;
                        break;
                    case 'double':
                        // 得分加倍在update中处理
                        break;
                    case 'shield':
                        this.invulnerable = true;
                        break;
                }
            }

            lightenColor(color, percent) {
                const num = parseInt(color.replace("#",""), 16);
                const amt = Math.round(2.55 * percent);
                const R = (num >> 16) + amt;
                const G = (num >> 8 & 0x00FF) + amt;
                const B = (num & 0x0000FF) + amt;
                return "#" + (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + 
                            (G<255?G<1?0:G:255)*0x100 + 
                            (B<255?B<1?0:B:255)).toString(16).slice(1);
            }

            darkenColor(color, percent) {
                return this.lightenColor(color, -percent);
            }
        }

        // 障碍物类
        class Obstacle {
            constructor() {
                this.x = Math.random() * (canvas.width * 0.7) + canvas.width * 0.15;
                this.y = -50;
                this.width = 40;
                this.height = 40;
                this.type = Math.random() > 0.5 ? 'rock' : 'log';
                this.rotation = 0;
                this.rotationSpeed = (Math.random() - 0.5) * 0.1;
            }

            update() {
                this.y += 4;
                this.rotation += this.rotationSpeed;
            }

            draw() {
                ctx.save();
                ctx.translate(this.x, this.y);
                ctx.rotate(this.rotation);
                
                if (this.type === 'rock') {
                    // 绘制岩石
                    ctx.fillStyle = '#666';
                    ctx.beginPath();
                    ctx.moveTo(0, -this.height/2);
                    ctx.lineTo(this.width/2, 0);
                    ctx.lineTo(0, this.height/2);
                    ctx.lineTo(-this.width/2, 0);
                    ctx.closePath();
                    ctx.fill();
                    
                    ctx.fillStyle = '#888';
                    ctx.beginPath();
                    ctx.moveTo(0, -this.height/3);
                    ctx.lineTo(this.width/3, 0);
                    ctx.lineTo(0, this.height/3);
                    ctx.lineTo(-this.width/3, 0);
                    ctx.closePath();
                    ctx.fill();
                } else {
                    // 绘制木头
                    ctx.fillStyle = '#8B4513';
                    ctx.fillRect(-this.width/2, -this.height/2, this.width, this.height);
                    
                    ctx.fillStyle = '#654321';
                    ctx.fillRect(-this.width/2, -this.height/2, this.width, 5);
                    ctx.fillRect(-this.width/2, this.height/2 - 5, this.width, 5);
                }
                
                ctx.restore();
            }

            checkCollision(player) {
                return Math.abs(this.x - player.x) < (this.width + player.width) / 2 &&
                       Math.abs(this.y - player.y) < (this.height + player.height) / 2;
            }
        }

        // 道具类
        class PowerUp {
            constructor() {
                this.x = Math.random() * (canvas.width * 0.6) + canvas.width * 0.2;
                this.y = -30;
                this.size = 25;
                this.type = ['boost', 'double', 'shield'][Math.floor(Math.random() * 3)];
                this.collected = false;
                this.pulse = 0;
            }

            update() {
                this.y += 3;
                this.pulse += 0.1;
            }

            draw() {
                if (this.collected) return;
                
                const scale = 1 + Math.sin(this.pulse) * 0.1;
                
                ctx.save();
                ctx.translate(this.x, this.y);
                ctx.scale(scale, scale);
                
                // 绘制光晕
                const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, this.size);
                gradient.addColorStop(0, 'rgba(255, 215, 0, 0.8)');
                gradient.addColorStop(1, 'rgba(255, 215, 0, 0)');
                ctx.fillStyle = gradient;
                ctx.beginPath();
                ctx.arc(0, 0, this.size * 1.5, 0, Math.PI * 2);
                ctx.fill();
                
                // 绘制道具图标
                ctx.fillStyle = '#FFD700';
                ctx.strokeStyle = '#FFA500';
                ctx.lineWidth = 2;
                
                switch(this.type) {
                    case 'boost':
                        // 闪电图标
                        ctx.beginPath();
                        ctx.moveTo(-5, -10);
                        ctx.lineTo(3, -2);
                        ctx.lineTo(-2, 0);
                        ctx.lineTo(5, 10);
                        ctx.lineTo(-3, 2);
                        ctx.lineTo(2, 0);
                        ctx.closePath();
                        ctx.fill();
                        ctx.stroke();
                        break;
                    case 'double':
                        // x2图标
                        ctx.font = 'bold 16px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText('x2', 0, 0);
                        break;
                    case 'shield':
                        // 盾牌图标
                        ctx.beginPath();
                        ctx.moveTo(0, -10);
                        ctx.lineTo(8, -5);
                        ctx.lineTo(8, 5);
                        ctx.lineTo(0, 10);
                        ctx.lineTo(-8, 5);
                        ctx.lineTo(-8, -5);
                        ctx.closePath();
                        ctx.fill();
                        ctx.stroke();
                        break;
                }
                
                ctx.restore();
            }

            checkCollection(player) {
                if (this.collected) return false;
                
                const distance = Math.sqrt(
                    Math.pow(this.x - player.x, 2) + 
                    Math.pow(this.y - player.y, 2)
                );
                
                if (distance < this.size + player.width/2) {
                    this.collected = true;
                    return true;
                }
                return false;
            }
        }

        // 赛道类
        class Track {
            constructor() {
                this.offset = 0;
                this.waveOffset = 0;
                this.lanes = [];
                this.decorations = [];
                this.initTrack();
            }

            initTrack() {
                // 初始化赛道装饰
                for (let i = 0; i < 15; i++) {
                    this.decorations.push({
                        x: Math.random() > 0.5 ? canvas.width * 0.1 : canvas.width * 0.9,
                        y: i * 80,
                        type: Math.random() > 0.5 ? 'flag' : 'buoy',
                        color: ['#FF6B6B', '#4ECDC4', '#FFD700', '#FF69B4'][Math.floor(Math.random() * 4)]
                    });
                }
            }

            update() {
                this.offset += 5;
                this.waveOffset += 0.05;
                
                // 更新装饰物
                this.decorations.forEach(decoration => {
                    decoration.y += 5;
                    if (decoration.y > canvas.height + 50) {
                        decoration.y = -50;
                        decoration.x = Math.random() > 0.5 ? canvas.width * 0.1 : canvas.width * 0.9;
                        decoration.color = ['#FF6B6B', '#4ECDC4', '#FFD700', '#FF69B4'][Math.floor(Math.random() * 4)];
                    }
                });
            }

            draw() {
                // 绘制水面背景
                const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
                gradient.addColorStop(0, '#87CEEB');
                gradient.addColorStop(0.5, '#4A90E2');
                gradient.addColorStop(1, '#1E90FF');
                ctx.fillStyle = gradient;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 绘制波浪效果
                ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
                ctx.lineWidth = 2;
                for (let i = 0; i < 5; i++) {
                    ctx.beginPath();
                    for (let x = 0; x <= canvas.width; x += 10) {
                        const y = canvas.height * 0.3 + i * 50 + 
                                 Math.sin((x + this.waveOffset * 50) * 0.01) * 10;
                        if (x === 0) {
                            ctx.moveTo(x, y);
                        } else {
                            ctx.lineTo(x, y);
                        }
                    }
                    ctx.stroke();
                }
                
                // 绘制赛道
                const trackLeft = canvas.width * 0.15;
                const trackRight = canvas.width * 0.85;
                
                // 赛道背景
                ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
                ctx.fillRect(trackLeft, 0, trackRight - trackLeft, canvas.height);
                
                // 赛道边界
                ctx.strokeStyle = '#FFD700';
                ctx.lineWidth = 4;
                ctx.setLineDash([20, 10]);
                ctx.beginPath();
                ctx.moveTo(trackLeft, 0);
                ctx.lineTo(trackLeft, canvas.height);
                ctx.moveTo(trackRight, 0);
                ctx.lineTo(trackRight, canvas.height);
                ctx.stroke();
                ctx.setLineDash([]);
                
                // 中心线
                ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
                ctx.lineWidth = 3;
                ctx.setLineDash([30, 15]);
                ctx.beginPath();
                ctx.moveTo(canvas.width / 2, 0);
                ctx.lineTo(canvas.width / 2, canvas.height);
                ctx.stroke();
                ctx.setLineDash([]);
                
                // 绘制装饰物
                this.decorations.forEach(decoration => {
                    ctx.save();
                    ctx.translate(decoration.x, decoration.y);
                    
                    if (decoration.type === 'flag') {
                        // 绘制旗帜
                        ctx.fillStyle = decoration.color;
                        ctx.beginPath();
                        ctx.moveTo(0, -20);
                        ctx.lineTo(25, -10);
                        ctx.lineTo(0, 0);
                        ctx.closePath();
                        ctx.fill();
                        
                        ctx.strokeStyle = '#333';
                        ctx.lineWidth = 2;
                        ctx.beginPath();
                        ctx.moveTo(0, -20);
                        ctx.lineTo(0, 20);
                        ctx.stroke();
                    } else {
                        // 绘制浮标
                        ctx.fillStyle = decoration.color;
                        ctx.beginPath();
                        ctx.arc(0, 0, 12, 0, Math.PI * 2);
                        ctx.fill();
                        
                        ctx.strokeStyle = '#FFF';
                        ctx.lineWidth = 2;
                        ctx.beginPath();
                        ctx.arc(0, 0, 8, 0, Math.PI * 2);
                        ctx.stroke();
                    }
                    
                    ctx.restore();
                });
            }
        }

        // 游戏管理器
        class GameManager {
            constructor() {
                this.player1 = null;
                this.player2 = null;
                this.track = null;
                this.obstacles = [];
                this.powerups = [];
                this.keys = {};
                this.lastTime = 0;
                this.init();
            }

            init() {
                this.setupEventListeners();
                this.setupCharacterSelection();
            }

            setupEventListeners() {
                // 键盘事件
                window.addEventListener('keydown', (e) => {
                    this.keys[e.key.toLowerCase()] = true;
                });

                window.addEventListener('keyup', (e) => {
                    this.keys[e.key.toLowerCase()] = false;
                });

                // 触摸控制
                let touchStartX = null;
                let touchPlayer = null;
                
                canvas.addEventListener('touchstart', (e) => {
                    touchStartX = e.touches[0].clientX;
                    touchPlayer = touchStartX < canvas.width / 2 ? this.player1 : this.player2;
                    e.preventDefault();
                });

                canvas.addEventListener('touchmove', (e) => {
                    if (!touchStartX || !touchPlayer) return;
                    
                    const touchX = e.touches[0].clientX;
                    const diffX = touchX - touchStartX;
                    
                    if (Math.abs(diffX) > 10) {
                        if (diffX > 0) {
                            touchPlayer.moveRight();
                        } else {
                            touchPlayer.moveLeft();
                        }
                        touchStartX = touchX;
                    }
                    
                    touchPlayer.accelerate();
                    e.preventDefault();
                });

                canvas.addEventListener('touchend', () => {
                    touchStartX = null;
                    touchPlayer = null;
                });
            }

            setupCharacterSelection() {
                const cards = document.querySelectorAll('.character-card');
                cards.forEach(card => {
                    card.addEventListener('click', () => {
                        const player = card.dataset.player;
                        const emoji = card.querySelector('.character-icon').textContent;
                        
                        // 切换选中状态
                        cards.forEach(c => {
                            if (c.dataset.player === player) {
                                c.classList.toggle('selected');
                            }
                        });
                        
                        // 更新选中的角色
                        if (player === '1') {
                            gameState.selectedCharacters.player1 = emoji;
                        } else {
                            gameState.selectedCharacters.player2 = emoji;
                        }
                    });
                });
                
                // 默认选中第一个
                cards[0].classList.add('selected');
                cards[1].classList.add('selected');
            }

            startGame() {
                // 初始化游戏对象
                this.player1 = new Player(
                    canvas.width * 0.3, 
                    canvas.height - 100, 
                    '#FF6B6B', 
                    '玩家1',
                    gameState.selectedCharacters.player1
                );
                
                this.player2 = new Player(
                    canvas.width * 0.7, 
                    canvas.height - 100, 
                    '#4ECDC4', 
                    '玩家2',
                    gameState.selectedCharacters.player2
                );
                
                this.track = new Track();
                this.obstacles = [];
                this.powerups = [];
                
                gameState.running = true;
                gameState.startTime = Date.now();
                
                this.lastTime = performance.now();
                this.gameLoop();
            }

            gameLoop() {
                if (!gameState.running) return;
                
                const currentTime = performance.now();
                const deltaTime = currentTime - this.lastTime;
                this.lastTime = currentTime;
                
                // 检查游戏时间
                gameState.currentTime = Date.now() - gameState.startTime;
                if (gameState.currentTime >= GAME_CONFIG.GAME_DURATION) {
                    this.endGame();
                    return;
                }
                
                // 清空画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 更新和绘制赛道
                this.track.update();
                this.track.draw();
                
                // 生成障碍物和道具
                if (Math.random() < GAME_CONFIG.OBSTACLE_SPAWN_RATE) {
                    this.obstacles.push(new Obstacle());
                }
                
                if (Math.random() < GAME_CONFIG.POWERUP_SPAWN_RATE) {
                    this.powerups.push(new PowerUp());
                }
                
                // 更新和绘制障碍物
                this.obstacles = this.obstacles.filter(obstacle => {
                    obstacle.update();
                    obstacle.draw();
                    
                    // 碰撞检测
                    if (!this.player1.invulnerable && obstacle.checkCollision(this.player1)) {
                        this.player1.speed *= 0.5;
                        this.player1.score = Math.max(0, this.player1.score - 50);
                        return false;
                    }
                    
                    if (!this.player2.invulnerable && obstacle.checkCollision(this.player2)) {
                        this.player2.speed *= 0.5;
                        this.player2.score = Math.max(0, this.player2.score - 50);
                        return false;
                    }
                    
                    return obstacle.y < canvas.height + 50;
                });
                
                // 更新和绘制道具
                this.powerups = this.powerups.filter(powerup => {
                    powerup.update();
                    powerup.draw();
                    
                    // 收集检测
                    if (powerup.checkCollection(this.player1)) {
                        this.player1.applyPowerup(powerup.type);
                        this.showPowerupIndicator(this.player1.name, powerup.type);
                        return false;
                    }
                    
                    if (powerup.checkCollection(this.player2)) {
                        this.player2.applyPowerup(powerup.type);
                        this.showPowerupIndicator(this.player2.name, powerup.type);
                        return false;
                    }
                    
                    return powerup.y < canvas.height + 50 && !powerup.collected;
                });
                
                // 处理输入
                this.handleInput();
                
                // 更新和绘制玩家
                this.player1.update(deltaTime);
                this.player2.update(deltaTime);
                this.player1.draw();
                this.player2.draw();
                
                // 更新UI
                this.updateUI();
                
                requestAnimationFrame(() => this.gameLoop());
            }

            handleInput() {
                // 玩家1控制
                if (this.keys['a'] || this.keys['arrowleft']) {
                    this.player1.moveLeft();
                }
                if (this.keys['d'] || this.keys['arrowright']) {
                    this.player1.moveRight();
                }
                if (this.keys['w'] || this.keys['arrowup']) {
                    this.player1.accelerate();
                }
                
                // 玩家2控制
                if (this.keys['j']) {
                    this.player2.moveLeft();
                }
                if (this.keys['l']) {
                    this.player2.moveRight();
                }
                if (this.keys['i']) {
                    this.player2.accelerate();
                }
            }

            updateUI() {
                // 更新分数
                document.getElementById('player1Score').textContent = this.player1.score;
                document.getElementById('player2Score').textContent = this.player2.score;
                
                // 更新速度表
                const avgSpeed = (Math.abs(this.player1.speed) + Math.abs(this.player2.speed)) / 2;
                const speedPercent = (avgSpeed / GAME_CONFIG.MAX_SPEED) * 100;
                document.getElementById('speedFill').style.width = speedPercent + '%';
            }

            showPowerupIndicator(playerName, powerupType) {
                const indicator = document.getElementById('powerupIndicator');
                const powerupNames = {
                    'boost': '加速',
                    'double': '双倍得分',
                    'shield': '护盾'
                };
                
                indicator.textContent = `${playerName} 获得了 ${powerupNames[powerupType]}！`;
                indicator.classList.add('show');
                
                setTimeout(() => {
                    indicator.classList.remove('show');
                }, 2000);
            }

            endGame() {
                gameState.running = false;
                
                // 确定获胜者
                const winner = this.player1.score > this.player2.score ? '玩家1' : 
                              this.player2.score > this.player1.score ? '玩家2' : '平局';
                
                // 显示结果
                document.getElementById('winnerText').textContent = 
                    winner === '平局' ? '🤝 平局！' : `🏆 ${winner} 获胜！`;
                document.getElementById('finalScore1').textContent = this.player1.score;
                document.getElementById('finalScore2').textContent = this.player2.score;
                
                gameOverScreen.classList.add('show');
            }
        }

        // 全局游戏管理器
        let gameManager;

        // 开始游戏
        function startGame() {
            startScreen.classList.add('hidden');
            if (!gameManager) {
                gameManager = new GameManager();
            }
            gameManager.startGame();
        }

        // 重新开始游戏
        function restartGame() {
            gameOverScreen.classList.remove('show');
            startScreen.classList.remove('hidden');
        }

        // 页面加载完成后初始化
        window.addEventListener('load', () => {
            // 预加载或初始化
            console.log('游戏已准备就绪！');
        });
    </script>
</body>
</html>
